import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import UserItem from '../user-item'
import './index.less'
import location from '../../assets/images'

interface IProps {
  showInfo?: boolean
  isTop?: boolean
  showMore?: boolean
  index?: number
  showBtnFollow?: boolean
  item?: object
}

export default class Index extends Component<IProps> {
  componentDidMount() {}
  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  onPreview = (imgs: [], index: number, e: any) => {
    e.stopPropagation()
    const urls = imgs.map((img) => {
      return img.origPath
    })
    Taro.previewImage({
      urls,
      current: urls[index]
    })
  }
  goTopic = (id: string, e: any) => {
    e.stopPropagation()
    Taro.navigateTo({
      url: '/pages/topic?id=' + id
    })
  }
  goDetail = () => {
    // if (!this.showInfo) {
    //   return
    // }
    // if (this.$Taro.getOpenerEventChannel) {
    //   Taro.navigateTo({ url: '/pages/post-details?id=' + this.item.id })
    // } else {
    //   Taro.navigateTo({
    //     url: '/pages/post-details?id=' + this.item.id,
    //     events: {
    //       acceptDataFromOpenedPage: async (res) => {
    //         if (res.hasFollow) {
    //           this.item.hasFollow = res.hasFollow
    //           this.$emit('follow', this.item.user.id)
    //         }
    //       }
    //     }
    //   })
    // }
  }
  onFollow = async (e) => {
    e.stopPropagation()
    //     const { isBinding } = Taro.getStorageSync('user')
    //     if (isBinding === 0) {
    //       Taro.navigateTo({
    //         url: '/pages/gender'
    //       })
    //     } else {
    //       const isFollow = await Follow.concern(this.item.userId)
    //       this.item.hasFollow = isFollow
    //     }
    //   }
    //   openMap = (post: any, e: any) => {
    //     e.stopPropagation()
    //     Taro.openLocation({
    //       latitude: Number.parseFloat(post.latitude),
    //       longitude: Number.parseFloat(post.longitude),
    //       name: post.address
    //     })
  }
  onShare = (e: any) => {
    e.stopPropagation()
    Taro.navigateTo({
      url: '/pages/post-share?id=' + this.item.id
    })
  }
  onMore = (e) => {
    e.stopPropagation()
    // this.$emit('more', {
    //   post: this.item,
    //   index: this.index
    // })
  }

  render() {
    const { item, showBtnFollow, showMore, isTop, showInfo } = this.props
    console.log(this.props)
    return (
      <View className={`post ${isTop ? 'post-top' : ''}`} onClick={this.goDetail}>
        <UserItem info={item.user}>
          {item.isTop ? <View slot="action" className="top"></View> : null}
          {!item.hasFollow && showBtnFollow ? (
            <View slot="action">
              <View className="btn-follow" hoverclassName="btn-hover" onClick={this.onFollow}>
                <View className="icon icon-add"></View>
                <View>关注</View>
              </View>
            </View>
          ) : null}
          {showMore ? (
            <View slot="action" onClick={this.onMore}>
              <View className="more">
                <View className="icon icon-more" />
              </View>
            </View>
          ) : null}
        </UserItem>
        <View className="post-content">
          <View className="post-txt">
            {item.content.map((obj) => {
              return (
                <block key={obj.value}>
                  {obj.type === 0 ? (
                    <Text className={`${showInfo ? 'simple' : ''}`} space="nbsp">
                      {obj.value}
                    </Text>
                  ) : (
                    <Image className="icon-img" src={obj.src} />
                  )}
                </block>
              )
            })}
          </View>
          {isTop ? (
            <View className="top-des">
              <View>查看活动详情</View>
              <View className="icon icon-arrow-right" />
            </View>
          ) : (
            <block>
              {showInfo ? (
                <View className="post-imgs">
                  {item.imgs.map((img, index) => {
                    return (
                      <View className="post-img-item" key={index}>
                        <Image onClick={this.onPreview(item.imgs, index)} src={img.path} mode="aspectFill" lazyLoad />
                        {img.height > item.height ? <View className="img-des">长图</View> : null}
                      </View>
                    )
                  })}
                </View>
              ) : (
                <View>
                  {item.imgs((img, index) => {
                    return (
                      <Image
                        onClick={this.onPreview(item.imgs, index)}
                        key={index}
                        src={img.origPath}
                        style={{ width: '100%', height: `${img.height}rpx` }}
                        mode="widthFix"
                        lazyLoad
                      />
                    )
                  })}
                </View>
              )}

              {item.address ? (
                <View className="location">
                  <View className="address" onClick={this.openMap(item)}>
                    <Image src={location} />
                    <View className="name">{item.address}</View>
                    <View className="icon icon-arr-right"></View>
                  </View>
                </View>
              ) : null}
              {showInfo ? (
                <block>
                  <View className="post-topic">
                    {item.hotNum > -1 ? (
                      <View className="hot-num">
                        <Text className="icon icon-hot" />
                        热度
                        <Text className="hot-num">{item.hotNum}</Text>℃
                      </View>
                    ) : null}
                    <View className="topic" onClick={this.goTopic(item.topicId)} v-else>
                      <View className="icon icon-topic-full" />
                      <View className="topicTitle">{item.topicTitle}</View>
                      <View className="icon icon-arrow-right" />
                    </View>
                    <View className="zan">
                      {item.likers.map((img, index) => {
                        return <Image src={img} key={index} />
                      })}
                      <View className="zan-des">{item.thumbsCount}人赞了</View>
                    </View>
                  </View>
                  {item.hotComment ? (
                    <View className="post-hot-comment">
                      <Text>
                        <Text className="hot-tag">热评</Text>
                        <Text className="nick">{item.hotComment.user.nick}：</Text>
                        <Text>{item.hotComment.content}</Text>
                      </Text>
                    </View>
                  ) : null}
                  <View className="post-tool">
                    <View className="count-item" onClick={this.onShare}>
                      <View className="icon icon-share"></View>
                      <View>分享</View>
                    </View>
                    <View className={`count-item ${item.drillCount ? 'drill' : ''}`}>
                      <View className="icon icon-drill" />
                      <View>{item.drillCount ? item.drillCount : '赞赏'}</View>
                    </View>
                    <View className="count-item">
                      <View className="icon icon-zan-line" />
                      <View>{item.thumbsCount || '赞'}</View>
                    </View>
                    <View className="count-item">
                      <View className="icon icon-comment" />
                      <View>{item.commentCount || '评论'}</View>
                    </View>
                  </View>
                </block>
              ) : null}
            </block>
          )}
        </View>
      </View>
    )
  }
}
Index.defaultProps = {
  showInfo: true,
  isTop: false,
  showMore: false,
  showBtnFollow: true
}
